<template>
  <div class="header">
    <!-- logo区 -->
    <div style="margin-left: 90px">
      <img src="../../assets/logo.png" style="width: 150px; height: 150px" />
    </div>
    <!-- 搜索区 -->
    <div
      style="display: flex; margin-top: 80px; z-index: 3; margin-left: 400px"
    >
      <el-input v-model="input" placeholder="请输入医疗相关的内容"></el-input>
      <img
        @click="search"
        src="../../assets/img/search.png"
        style="
          margin-left: 10px;
          width: 50px;
          height: 40px;
          border-radius: 30px;
        "
      />
      <ul id="ul1" v-show="a">
        <li>
          <a :href="url1" target="_blank">{{ li1 }}</a>
        </li>
        <li>
          <a :href="url2" target="_blank">{{ li2 }}</a>
        </li>
        <li>
          <a :href="url3" target="_blank">{{ li3 }}</a>
        </li>
      </ul>
    </div>

    <!-- 登录和注册区域 -->
    <div v-show="!ifthoken" style="margin-left: 400px">
      <span
        @click="login"
        style="color: darkgray; font-size: 18px; cursor: pointer"
        >登录</span
      >
      |
      <span
        @click="register"
        style="color: darkgray; font-size: 18px; cursor: pointer"
        >注册</span
      >
    </div>
    <div v-show="ifthoken" style="margin-left: 400px">
      <img
        src="../../assets/img/xiaoxin.jpg"
        style="
          width: 30px;
          height: 30px;
          border-radius: 30px;
          margin-top: 10px;
          position: relative;
          margin-left: -100px;
        "
      />
      <el-dropdown style="margin-top: 15px; position: absolute">
        <span class="el-dropdown-link">
          个人中心<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            ><router-link tag="div" :to="{ name: 'goMydetail' }"
              >我的资料</router-link
            ></el-dropdown-item
          >
          <el-dropdown-item
            ><router-link tag="div" :to="{ name: 'nurseRelease' }"
              >我要发布</router-link
            ></el-dropdown-item
          >
          <el-dropdown-item
            ><span @click="goRecharge">会员充值</span></el-dropdown-item
          >
          <el-dropdown-item
            ><span @click="logout">退出登录</span></el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      input: "",
      ifShow: false,
      a: false,
      li1: "",
      li2: "",
      li3: "",
      ifthoken: JSON.parse(localStorage.getItem("ifthoken")),
    };
  },
  computed: {
    url1() {
      return `https://www.baidu.com/s?wd=${this.li1}`;
    },
    url2() {
      return `https://www.baidu.com/s?wd=${this.li2}`;
    },
    url3() {
      return `https://www.baidu.com/s?wd=${this.li3}`;
    },
  },
  methods: {
    login() {
      this.$router.push("/login");
    },
    register() {
      this.$router.push("/register");
    },
    search() {
      if (this.input != "") {
        if (
          this.input.indexOf("药") >= 0 ||
          this.input.indexOf("医") >= 0 ||
          this.input.indexOf("护") >= 0
        ) {
          if (!this.input) {
            this.a = false;
          } else {
            this.$jsonp(
              `https://www.baidu.com/sugrec?prod=pc&wd=${this.input}`
            ).then((res) => {
              console.log(res.g);
              this.li1 = res.g[0].q;
              this.li2 = res.g[1].q;
              this.li3 = res.g[1].q;
              this.a = true;
            });
          }
        } else {
          this.$message("请输入和医疗相关的再继续操作");
        }
      }
    },
    goRelease() {
      this.$router.push("/nurseRelease");
    },
    goLogin() {
      this.$router.push("/login");
    },
    goMydetail() {
      this.$router.push("/goMydetail");
    },
    logout() {
      this.$store.commit("REMOVE_INFO");
      localStorage.removeItem("ifthoken");
      localStorage.removeItem("isLogin");
      this.ifthoken = false;
      this.$router.push("/");
    },
    /* changeIfthoken() {
      this.$store.state.ifthoken = true;
    }, */
    goRecharge() {
      this.$message("相关模块尚在开发");
    },
  },
  /* mounted() {
    this.$bus.$on("changeIfthoken", this.changeIfthoken);
  }, */
  watch: {
    input(val) {
      if (val === "") {
        this.a = false;
      }
    },
  },
};
</script>

<style scoped>
.header {
  color: darkgray;
  display: flex;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
#ul1 {
  position: absolute;
  border: 1px solid #f90;
  width: 215px;
  margin: 0px;
  padding: 0px;
  margin-top: 40px;
}
#ul1 li {
  list-style: none;
}
#ul1 li a {
  line-height: 30px;
  padding: 5px;
  display: block;
  text-decoration: none;
  color: black;
}
#ul1 li a:hover {
  background-color: #f90;
  color: white;
}
</style>